import React, { Component } from 'react';

// 导入样式表
import './Tabbar.scss'
import pic1 from '../imgs/dianpu.gif'
import pic2 from '../imgs/fenlei.gif'
import pic3 from '../imgs/shop.gif'
import pic4 from '../imgs/shopcart.gif'
import pic5 from '../imgs/mine.gif'
class Tabbar extends Component {
    constructor(props) {
        super(props);
        this.state = { //定义组件状态
            arr: [
                { name: '店铺', pic: pic1 },
                { name: '分类', pic: pic2 },
                { name: '全部商品', pic: pic3 },
                { name: '购物车', pic: pic4 },
                { name: '个人中心', pic: pic5 },
            ]
        }
    }
    render() {
        return (
            <div className='tabbar'>
                {
                    this.state.arr.map((item) => {
                        return (
                            <div className="btn">
                                <img src={item.pic} alt="" />
                                <p>{item.name}</p>
                            </div>
                        )
                    })
                }
            </div>
        );
    }
}

export default Tabbar;